<template>
  <div>
    <div class="center">
      <el-row :gutter="20">
        <el-col :span="12"
          ><div class="grid-content bg-purple">
            <div class="toux">
              <router-link  to="/home/gerenzhongxin">
               <img class="img1" src="@/assets/img/R-C.png" alt="" />
              </router-link>
             
              <div>
                <h4>早上好，{{user.username}}，今天要记得开心哦</h4>

              <h4>钻石用户</h4>
              <h5>账号:{{ user.userId }}</h5>
              <h5>上次登录时间：{{LoginTime}}</h5>
            </div>
            <div></div>
            <!-- <p>钻石用户</p>
            <p>账号：1314520..</p>
            <p>上次登录时间：2021-12-10 18：36：13</p> -->
            </div>
          </div>
        </el-col>
        <el-col :span="4"
          ><div class="grid-content bg-purple" id="one">
            <p>5</p>
            <h1>我的待办</h1>
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple" id="one">
            <p>0</p>
            <h1>我的预约</h1>
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple" id="one">
            <p>3</p>
            <h1>已完成</h1>
          </div></el-col
        >
      </el-row>
    </div>
    <div id="content">
      <el-row :gutter="20" id="left">
        <el-col :span="12"
          ><div
            class="grid-content bg-purple"
            style="height: 378px; background-color: #fff"
          >
            <!-- 1 -->

            <div class="header">
              <p>预约医院</p>
              <p>更多&gt;</p>
            </div>
            <div class="yiyuan">
              <p>医院</p>
              <p>电话</p>
            </div>
            <ul>
              <li
                v-for="item in list"
                :key="item.hospitalName"
                style="
                  display: flex;
                  justify-content: space-between;
                  background-color: #fff;
                  font-size: 16px;
                "
              >
                <span>{{ item.hospitalName }}</span>

                <span>{{ item.hospitalAddress }}</span>
                <span>{{ item.phone }}</span>
              </li>
            </ul>
          </div></el-col
        >
        <!-- 2 -->
        <el-col :span="12"
          ><div class="grid-content bg-purple" id="main"></div
        ></el-col>
      </el-row>
    </div>
    <div id="content">
      <el-row :gutter="20">
        <el-col :span="12"
          ><div class="grid-content bg-purple" id="main2"></div
        ></el-col>
        <el-col :span="12"
          ><div class="grid-content bg-purple" id="main3"></div
        ></el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts">
import { mockService } from "../../api/mock";

// import {} from "@element-plus/icons-vue";
import {useStore} from "vuex"
import { defineComponent, onMounted, ref , computed} from "vue";
import * as echarts from "echarts";
export default defineComponent({
  components: {},

  setup() {
    const store = useStore()
    const user = computed(()=>{
      return store.state.user
  })
  const b:any =  user.value.username
 const pasage = JSON.parse(localStorage.getItem(b) as any) 
  const LoginTime = localStorage.getItem('loginTime')
// const geren = ()=>{
    
// }
    const column = () => {
      const main: HTMLElement | null = document.getElementById("main");
      if (main) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(main);
        // 绘制图表
        var chartDom = document.getElementById("main");

        var option;

        option = {
          title: {
            text: "预约接种数量",
            subtext: "截至2021/12/31",
          },
          legend: {},
          tooltip: {},
          dataset: {
            source: [
              ["product", "宠物猫", "宠物猪", "宠物狗", "其他"],
              ["2015", 43.3, 85.8, 93.7, 50],
              ["2016", 83.1, 73.4, 55.1, 66],
              ["2020", 86.4, 65.2, 82.5, 88],
              ["2021", 72.4, 53.9, 39.1, 99],
            ],
          },
          xAxis: { type: "category" },
          yAxis: {},
          // Declare several bar series, each will be mapped
          // to a column of dataset.source by default.
          series: [
            { type: "bar" },
            { type: "bar" },
            { type: "bar" },
            { type: "bar" },
          ],
        };

        option && myChart.setOption(option);
      }
      window.onresize = () => {
        myChart.resize();
      };
    };
    const pie = () => {
      const main2: HTMLElement | null = document.getElementById("main2");
      if (main2) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(main2);
        // 绘制图表
        myChart.setOption({
          title: {
            text: "疫苗接种宠物类别统计",
            subtext: "截至2021/12/31",
            left: "left",
          },
          tooltip: {
            trigger: "item",
          },
          grid: {
            left: "0%",
            top: "0%",
          },
          legend: {
            orient: "vertical",
            right: "right",
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: "50%",
              data: [
                { value: 1048, name: "猪" },
                { value: 735, name: "狗" },
                { value: 580, name: "猫" },
                { value: 484, name: "兔" },
                { value: 300, name: "其他" },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        });

        window.onresize = () => {
          myChart.resize();
        };
      }
    };
    const row = () => {
      const main3: HTMLElement | null = document.getElementById("main3");
      if (main3) {
        // var chartDom = document.getElementById("main");
        var myChart = echarts.init(main3);
        var option;

        option = {
          title: {
            text: "本月预约接种数量",
            subtext: "截至2021/12/31",
            left: "left",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // Use axis to trigger tooltip
              type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
            },
          },
          legend: {
            orient: "vertical",
            right: "right",
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },

          xAxis: {
            type: "value",
          },
          yAxis: {
            type: "category",
            data: [
              "佳雯宠物医院",
              "宏泰宠物医院",
              "莫太宠生",
              "佳雯宠物医院",
              "大嘴狗医院",
              "木一宠医",
              "汪宠物",
            ],
          },
          series: [
            {
              name: "宠物猫",
              type: "bar",
              stack: "total",
              label: {
                show: true,
              },
              emphasis: {
                focus: "series",
              },
              data: [320, 302, 301, 334, 390, 330, 320],
            },
            {
              name: "宠物狗",
              type: "bar",
              stack: "total",
              label: {
                show: true,
              },
              emphasis: {
                focus: "series",
              },
              data: [120, 132, 101, 134, 90, 230, 210],
            },
            {
              name: "宠物猪",
              type: "bar",
              stack: "total",
              label: {
                show: true,
              },
              emphasis: {
                focus: "series",
              },
              data: [220, 182, 191, 234, 290, 330, 310],
            },
            {
              name: "其他",
              type: "bar",
              stack: "total",
              label: {
                show: true,
              },
              emphasis: {
                focus: "series",
              },
              data: [150, 212, 201, 154, 190, 330, 410],
            },
            {
              name: "兔子",
              type: "bar",
              stack: "total",
              label: {
                show: true,
              },
              emphasis: {
                focus: "series",
              },
              data: [820, 832, 901, 934, 1290, 1330, 1320],
            },
          ],
        };

        option && myChart.setOption(option);
      }
    };
    onMounted(() => {
      column();
      pie();
      row();
    });
  
    // console.log(mockService);
    let list = ref([]);
    onMounted(async () => {
      const res = await mockService.getServerList(1, 10);
      console.log(res);
      list.value = res.result;
    });
    return { list , user ,LoginTime , pasage};
  },
});
</script>

<style lang="less" scoped>
.center {
  background-color: #f5f7fd;

  .toux {
    padding-top: 10px;
    padding-left: 10px;
    background: white;
    height: 148px;
    display: flex;
    color: #000;
    justify-content: space-between;

    .img1 {
      width: 122px;
      height: 122px;
      border-radius: 50%;
      justify-content: flex-start;
    }
    h4,
    h5 {
      font-weight: 400;
    }
  }
  // .is-guttered{
  //   display: flex;
  //   justify-content: center;
  // }
  #one {
    background-color: #f1ba45;
    height: 148px;
    display: flex;
    flex-direction: column;
    p {
      width: 100%;
      height: 65px;
      line-height: 65px;
      font-size: 89px;
      font-family: Arial;
      font-weight: bold;
      color: #fbfbfb;
      margin-top: 29px;
    }
  }
  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }
  /deep/ .el-col {
    border-radius: 4px;
    background-color: #f5f7fd;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
}
</style>
<style lang="less" scoped>
#content {
  /deep/.el-col {
    flex: 11;
    background: #f5f7fd;
    font-size: 20px;
    color: #697a95;
    line-height: 26px;
    text-align: center;
    padding-top: 20px;
    height: 100%;
  }
  .header {
    display: flex;
    justify-content: space-between;
    background-color: white;
  }
  .yiyuan {
    display: flex;
    justify-content: space-between;
    background-color: white;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 300;
    color: #252631;
    padding-top: 46px;
  }
}
#main {
  height: 378px;
  background: #ffffff;
}
#main2,
#main3 {
  height: 440px;
}
</style>

<style lang="less">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  margin: 10px 0;
  background-color: #f9fafc;
}
</style>
